<template>
  <div class="demo">
    <div class="demo-title">在卡片中使用</div>
    <div class="demo-content">
      <Row :gutter="16">
        <Col :span="12">
          <Card>
            <Statistic
              title="Feedback"
              :value="11.28"
              :precision="2"
              suffix="%"
              :value-style="{ color: '#3f8600' }"
              style="margin-right: 50px"
            >
              <template #prefix>
                <ArrowUpOutlined />
              </template>
            </Statistic>
          </Card>
        </Col>
        <Col :span="12">
          <Card>
            <Statistic
              title="Idle"
              :value="9.3"
              :precision="2"
              suffix="%"
              class="demo-class"
              :value-style="{ color: '#cf1322' }"
            >
              <template #prefix>
                <ArrowDownOutlined />
              </template>
            </Statistic>
          </Card>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons-vue';
  import Card from '@sscd/card';
  import { Row, Col } from '@sscd/grid';
  import Statistic from '@sscd/statistic';
</script>

<style lang="less" scoped>
  .demo-content {
    padding: 30px;
    background: #ececec;
  }
</style>
